<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="icon" href="/img/index_logo.png">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background-image: url('/img/login/login.png');
            background-size: 100% 100%;
            /*background-size: cover;*/
            /*background-repeat: no-repeat;*/
            /*background-position: center center;*/
        }

        .login-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            margin-left: 55%;
        }

        .login-form {
            width: 520px !important;
            height: 600px;
            background-image: url('/img/login/loginForm.png');
            border-radius: 10px;
        }

        .title {
            font-size: 20px;
            color: #222429;
            letter-spacing: 5px;
        }

        .title-icon {
            width: 34px;
            height: 4px;
            background: #409EFF;
            margin-top: 9px;
        }

        .layui-form {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: center;
        }

        .layui-input {
            padding-left: 10px;
            width: 380px;
            height: 56px;
            background: #FFFFFF;
            border-radius: 6px 6px 6px 6px !important;
            font-size: 18px;
            border-color: #FFFFFF;
        }

        .layui-input:hover {
            border-color: #FFFFFF !important;
        }

        .pear-btn {
            width: 380px;
            height: 56px;
            background: #398FFF !important;
            border: 1px solid #398FFF;
            border-radius: 6px 6px 6px 6px;
            font-size: 20px;
        }

        .layui-input-prefix {
            width: 45px;
        }

        .layui-input-prefix > i {
            font-size: 23px !important;
        }

        .layui-input-wrap .layui-input-prefix + .layui-input, .layui-input-wrap .layui-input-prefix ~ * .layui-input {
            padding-left: 60px;
        }

        .layui-input-split {
            border-color: #cdd2e3;
            margin-top: 10px;
            height: 70%;
        }

        .layui-form-item .layui-form-danger:focus {

        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-form">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item" style="margin-bottom: 0px;">
                <div class="title">欢迎登录系统</div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 50px;">
                <div class="title-icon"></div>
            </div>
            <div class="layui-form-item layui-input-wrap" style="margin-bottom: 30px;">
                <div class="layui-input-prefix  layui-input-split">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input id="username" name="username" autocomplete="off" placeholder="用 户 名 : " type="text"
                       class="layui-input" lay-verify="required" lay-reqtext="请输入用户名"/>
            </div>
            <div class="layui-form-item layui-input-wrap">
                <div class="layui-input-prefix  layui-input-split">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input id="password" name="password" autocomplete="off" placeholder="密 码 : " type="password"
                       class="layui-input" lay-verify="required" lay-reqtext="请输入密码"/>
            </div>
            <!--			<div class="layui-form-item">-->
            <!--				<input placeholder="验证码 : " name="captcha" id="captcha" hover class="code layui-input layui-input-inline"  required lay-verify="captcha" />-->
            <!--				<img src="captcha" class="captchaImage" id="captchaImage" onclick="this.src=this.src+'?'+Math.random()" title="点击刷新"/>-->
            <!--				<img src="/erp/captcha" class="captchaImage" id="captchaImage" onclick="this.src=this.src+'?'+Math.random()" title="点击刷新"/>-->
            <!--			</div>-->
            <div class="layui-form-item" style="width: 380px">
                <input type="checkbox" id="rememberme" name="rememberme" title="记住密码" lay-skin="primary">
            </div>
            <div class="layui-form-item" style="margin-top: 30px;">
                <button class="pear-btn pear-btn-success login" lay-submit lay-filter="formLogin">
                    登 入
                </button>
            </div>
        </form>
    </div>
</div>


<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'toast'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var toast = layui.toast;

        // Session过期，如何跳出iframe框架页的问题
        if(window !=top){
            top.location.href=location.href;
        }

        // 本地开发使用
        // $.ajax({
        //     url: 'login',
        //     type: 'post',
        //     dataType: 'text',
        //     data: {
        //         username: "admin",
        //         password: "123456",
        //     },
        //     success: function (result) {
        //         location.href = "index";
        //     }
        // })

        form.on('submit(formLogin)', function () {
            $.ajax({
                url: 'login',
                type: 'post',
                dataType: 'text',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val(),
                    rememberme: $('#rememberme').val()
                },
                success: function (result) {
                    var resultJson = JSON.parse(result)
                    if (resultJson.code === 200) {
                        location.href = "index";
                    } else {
                        layer.msg(resultJson.message, {icon: 2, time: 1000}, function () {
                            $("#captchaImage").attr("src", "captcha" + "?" + Math.random());
                        });
                        return false;
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>